<template>
  <div id="app">
    <TopNav></TopNav>
    <Play :musicList="musicList" :playMusice="playMusice" @play="changeMusic"></Play>
    <!-- <SongListItem :musicList="musicList"></SongListItem> -->
    <transition
      enter-active-class="animate__animated animate__fadeInUp"
    >
    <router-view @play="playMusic"></router-view>
    </transition>
  </div>
</template>
<script>
import TopNav from "@/components/TopNav";
import Play from "@/components/Play";

export default {
  data() {
    return {
      musicID: null,
      playMusice: null,
      musicList:[]
    };
  },
  components: {
    TopNav,
    Play,
  },
  methods: {
    changeMusic(e){
      this.playMusice=e;
    },
    playMusic(musice) {
      // console.log(musice);
      if (!musice.picUrl) {
        if (musice.al && musice.al.picUrl) {
          musice.picUrl = musice.al.picUrl;
        }else {
          musice.picUrl =
            "http://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg";
        }
      }
      if (musice.song && musice.song.artists) {
        musice.artists = musice.song.artists;
      }
      if(musice.ar){
        musice.artists = musice.ar;
      }

      this.playMusice = musice;

      let exit = false;
      for(let i = 0; i<this.musicList.length; i++){
        if(this.musicList[i].id==musice.id){
          exit = true;
          break;
        }
      }
      if(!exit){
        this.musicList.push(musice);
      }
      // this.musicID = e;
      console.log(this.musicList)
    },
  },
};
</script>

<style>
#app {
  padding-top: 40px;
}
</style>
